<!--
 * @页面名称: 模式4
 * @描述: 有文件,附件,全文,文件下有附件
 * @作者: 辛慰
 * @Date: 2020-07-31 12:00:08
-->
<template>
  <div class="mode-four">
    <!-- 左侧树 -->
    <left-tree
      :tabList="tabList"
      :isShowLeftTree.sync="isShowLeftTree"
      :treeData="treeData"
      @tabClick="tabClick">
    </left-tree>
    <div class="right-table" :style="{width: (isShowLeftTree ? 'calc(100% - 2px)': '82%')}">
      <!-- 文件模块 -->
      <div v-if="tabItemType==='tab_leftTab1'" style="height: 100%;">
        <splitpanes horizontal style="height: 200%;">
          <pane>
            <file-card
              @fileToLink="fileToLink"
              :fileLinkData="fileLinkData"></file-card>
          </pane>
          <pane>
            <appendix-card id="appendix-card"></appendix-card>
          </pane>
        </splitpanes>
      </div>
      <!-- 附件模块 -->
      <div v-if="tabItemType==='tab_leftTab2'" style="height: 100%;">
        <appendix-card></appendix-card>
      </div>
    </div>
  </div>
</template>

<script>
import { LeftTree, FileCard, AppendixCard } from '@/views/dynamic/components'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
export default {
  name: '',
  components: {
    LeftTree,
    FileCard,
    AppendixCard,
    Splitpanes,
    Pane
  },
  data () {
    return {
      tabList: [
        { name: '文件', mode: '1' },
        { name: '附件', mode: '2' }
      ],
      isShowLeftTree: false, // 是否显示左侧数据
      tabItemType: 'tab_leftTab1',
      treeData: [ // 左侧树
        { title: '（DQ）党群', key: '1' },
        { title: '（XZ）行政', key: '2' },
        { title: '（JX）教学', key: '3' },
        { title: '（KY）科研', key: '4' },
        { title: '（CP）产品', key: '5' },
        { title: '（JJ）基建', key: '6' },
        { title: '（YQ）仪器', key: '7' },
        { title: '（CB）出版', key: '8' },
        { title: '（WS）外事', key: '9' },
        { title: '（CK）财会', key: '10' }
      ],
      fileLinkData: [ // 卷内下有的数据
        {
          title: '附件数据'
        }
      ]
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    tabClick (val) {
      switch (val) {
        case '1':
          this.tabItemType = 'tab_leftTab1'
          break
        case '2':
          this.tabItemType = 'tab_leftTab2'
          break
      }
    },
    fileToLink () {
      document.getElementById('appendix-card').scrollIntoView({ block: 'end', behavior: 'smooth' })
    }
  }
}
</script>
<style lang="less" scoped>
.mode-four {
  height: 100%;
  display: flex;
  .right-table {
    transition: all 0.2s;
  }
}
</style>
